<!DOCTYPE html>
<html>
<head>
    <title>jQuery fastsearch demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jquery-fastsearch-1.0.1.js"></script>
    <style type="text/css">
        * {
            font-family: "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
        }

        em {
            color: #666;
            font-style: normal;
            font-size: .5em;
            font-weight: lighter;
        }

        input[type="text"] {
            width: 300px;
            padding: 2px;
            border: 2px solid #666;
            line-height: 24px;
        }

        table {
            text-align: left;
            margin-top: 20px;
            border-collapse: collapse;
            border: 2px solid #666;
            width: 1000px;
        }

        table thead th {
            background-color: #666;
            color: white;
            line-height: 32px;
        }
    </style>
</head>
<body>

<!--//////////////////////////////////////////////////////////-->

<h1>Demo 1 <em>Simplest usage</em></h1>
<input type="text" id="demo-1" placeholder="Input the keywords...">
<ul id="scope-1">
    <li>1234567890</li>
    <li>qwert yuiop asdfg hjkl; zxcvb nm</li>
    <li>jhu hjdflkdc dc</li>
    <li>中国开源社区</li>
    <li>Chiroc Cai</li>
    <li class="_ignore">ignore search result with class '_ignore'</li>
</ul>
<hr/>

<!--//////////////////////////////////////////////////////////-->

<h1>Demo 2 <em>Filter results with a simple code</em></h1>
<input type="text" id="demo-2" placeholder="Input the keywords...">
<ul id="scope-2">
    <li>1234567890</li>
    <li>qwert yuiop asdfg hjkl; zxcvb nm</li>
    <li>jhu hjdflkdc dc</li>
    <li>中国开源社区</li>
    <li>Chiroc Cai</li>
    <li class="_ignore">ignore search result with class '_ignore'</li>
</ul>
<hr/>

<!--//////////////////////////////////////////////////////////-->

<h1>Demo 3 <em>Simplest definitions in table, when want to hide it's parent node when toggle. Support dynamic
    table.</em></h1>
<input type="text" id="demo-3" placeholder="Input the keywords...">
<button onclick="addRow()">Add a row for table</button>
<label><input type="checkbox" id="chk"/> Dynamic</label>
<table id="scope-3">
    <thead>
    <tr>
        <th><input type="checkbox"/></th>
        <th>Sequence</th>
        <th>Description</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="_ignore"><input type="checkbox"/></td>
        <td>4673434-21</td>
        <td>表格内容信息描述，Table Information & description.</td>
        <td class="_ignore"><a href="#">Opt-1</a> | <a href="#">Opt-2</a> | <input type="button" class="_evt"
                                                                                   value="evt" id="t0"></td>
    </tr>
    <tr>
        <td class="_ignore"><input type="checkbox"/></td>
        <td><span>4673434-21</span></td>
        <td>表格内容信息描述，Table Information & description.</td>
        <td class="_ignore"><a href="#">Opt-1</a> | <a href="#">Opt-2</a> | <input type="button" class="_evt"
                                                                                   value="evt" id="t1"></td>
    </tr>
    <tr>
        <td class="_ignore"><input type="checkbox"/></td>
        <td>587546-21</td>
        <td>Compressed and uncompressed copies of jQuery files are available.</td>
        <td class="_ignore"><a href="#">Opt-1</a> | <a href="#">Opt-2</a> | <input type="button" class="_evt"
                                                                                   value="evt" id="t2"></td>
    </tr>
    <tr>
        <td class="_ignore"><input type="checkbox"/></td>
        <td>5555666-31</td>
        <td>NextApp 是开源中国在早几年开发的一个可自动为 WordPress 的博客网站生成手机客户端的平台.</td>
        <td class="_ignore"><a href="#">Opt-1</a> | <a href="#">Opt-2</a> | <input type="button" class="_evt"
                                                                                   value="evt" id="t3"></td>
    </tr>
    </tbody>
</table>
<hr/>
<!--//////////////////////////////////////////////////////////-->

<h1>Demo 4 <em>Self definitions in table.</em></h1>
<input type="text" id="demo-4" placeholder="Input the keywords...">
<table id="scope-4">
    <thead>
    <tr>
        <th><input type="checkbox"/></th>
        <th>Sequence</th>
        <th>Description</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="_ignore"><input type="checkbox"/></td>
        <td>4673434-21</td>
        <td>表格内容信息描述，Table Information & description.</td>
        <td class="_ignore"><a href="#">Opt-1</a> | <a href="#">Opt-2</a> | <a href="#">Opt-3</a></td>
    </tr>
    <tr>
        <td class="_ignore"><input type="checkbox"/></td>
        <td><span>4673434-21</span></td>
        <td>表格内容信息描述，Table Information & description.</td>
        <td class="_ignore"><a href="#">Opt-1</a> | <a href="#">Opt-2</a> | <a href="#">Opt-3</a></td>
    </tr>
    <tr>
        <td class="_ignore"><input type="checkbox"/></td>
        <td>587546-21</td>
        <td>Compressed and uncompressed copies of jQuery files are available.</td>
        <td class="_ignore"><a href="#">Opt-1</a> | <a href="#">Opt-2</a> | <a href="#">Opt-3</a></td>
    </tr>
    <tr>
        <td class="_ignore"><input type="checkbox"/></td>
        <td>5555666-31</td>
        <td>NextApp 是开源中国在早几年开发的一个可自动为 WordPress 的博客网站生成手机客户端的平台.</td>
        <td class="_ignore"><a href="#">Opt-1</a> | <a href="#">Opt-2</a> | <a href="#">Opt-3</a></td>
    </tr>
    </tbody>
</table>
<hr/>

<h1>Demo 5 <em>Dynamic element searching with event.</em></h1>
<input type="text" id="demo-5" placeholder="Input the keywords...">
<input type="button" id="dyn-create" value="Create item...">
<br/>
<ol id="scope-5">
    <li>Data list item 1.</li>
    <li>Data list item 2.</li>
    <li>Data list item 3. <button class="_evt _ignore">Evt</button> </li>
</ol>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<!--///////////////////////////////////////////////////////////////////////////////////////////////////-->
<script type="text/javascript">
    function addRow() {
        var row = '<tr><td class="_ignore"><input type="checkbox"/></td><td>' + (Math.floor(Math.random() * 1000)) + '</td><td>Compressed and uncompressed</td><td class="_ignore"><a href="#">Opt-1</a> | <a href="#">Opt-2</a> | <a href="#">Opt-3</a></td></tr>';
        $('#scope-3').find('tbody').append(row);
    }

    $(document).ready(function () {
        //Demo 1
        //$('#scope-1').find('li') -> the node for searching
        $('#demo-1').fastSearch($('#scope-1').find('li'));


        //------------------------------------------------------
        //Demo 2
        $('#demo-2').fastSearch($('#scope-2').find('li'), {
            autoToggle: false, //Toggle show/hide DOM node.
            caseSensitive: true, //Case sensitive.
            color: 'white', //font color for results.
            background: '#00f' //background color for results.
        });


        //------------------------------------------------------
        //Demo 3
        //$('#scope-3').find('td') -> the node for searching
        var sch = $('#demo-3').fastSearch($('#scope-3').find('td'), {
            autoToggle: true,
            dynamic: false,
            parent: true //when want to hide it's parent node when toggle
        });
        $('#chk').change(function () {
            sch.setting({
                dynamic: $(this).is(':checked')
            });
        });

        $('._evt', $('#scope-3')).click(function () {
            alert(this.id);
        });

        //------------------------------------------------------
        //Demo 4
        var target4 = $('#scope-4').find('td');
        $('#demo-4').fastSearch(target4, {
            // afterClear: event after clear search results.
            afterClear: function (self) {
                target4.parent().show();
            },

            // beforeSearch: event before search started.
            beforeSearch: function (self, keyWords) {
                target4.parent().hide();
            },

            // afterSearch: event after search completed.
            afterSearch: function (self, keyWords, result) {
                result.parent().show();
            }
        });

        //------------------------------------------------------
        //Demo 5
        $('#demo-5').fastSearch($('#scope-5').find('li'), {
            dynamic: true
        });

        $('#scope-5').delegate('li', 'click', function () {
            console.log($(this).text());
        });
        $('#scope-5').delegate('button._evt', 'click', function(e){
            console.log($(this).text());
            e.preventDefault();
            e.stopPropagation();
        });

        $('#dyn-create').click(function () {
            var item = $('<li>Dynamic Item, ' + new Date() + '</li>'),
                    button = $('<button class="_evt _ignore" type="button">Evt</button>');
            item.append(button);
            $('#scope-5').append(item);
        });
    });
</script>
</body>
</html>